@charset "utf-8";
/* CSS Document */

/* Grundlayout für SELFHTML-Beispiele */

html {
  background: #a8a8a8;  
  color: #f3ebe0;	
  font-family: AvenirWeb,"Avenir Next",Avenir,"Helvetica Neue",Arial,Helvetica,sans-serif;
}

body {
	margin:  auto;
	max-width: 90em;
	font-family: sans-serif;
	color: #333333
}

h1, main, article, aside, main svg {
	/*border-radius: 0 8px 8px;*/
 /* border-radius: .5em;*/
	/*border: 2px solid;*/
	/*padding: 1em;*/
  border: none;
	margin: .2em;
}

h1 {
	border-radius: .5em;
	margin: .2em;
	font-stretch: semi-expanded;
}

h2 {
		font-stretch: semi-expanded;
}
h3.kursiv{
  font-stretch: semi-expanded;
  font-style: italic;
}

image.raum {width: auto;
  margin: none;
  padding: none;
}

ul {
	list-style-type: none;
	
	/*font-family: 'Courier New', Courier, monospace;*/ /*hinzugefügt*/
	/*font-size: 1.2rem;*7
	margin: 0.2em;
	padding: 0 .1em;
	font-weight: 400; /*hinzugefügt*/
}

li {
	/*background-color: lightblue;*/
	list-style-type: none;
	/*margin: .5em;*/
}



/* Auf der Startseite wird das Bild aus- und als Hintergrundbild eingeblendet. */

#index {
  background: #a8a8a8 url("../img/bwalz_2021-08-1k-33.jpg") 0px 0px no-repeat;
  background-size: 100%; 
} 

footer {
  color: #333333;
}

#index img {display: none;}

/* Flexbox. */

.flex-container {
  display: flex; flex-flow: wrap; /*max-width 25em*/
}

.wrap {
  flex-flow: wrap;
}


.flex-item {
  color: #333333;
	border: 1px transparent;
	/*border-radius: .5em;*/
	margin: .5em;
	padding: .5em;
	background: #bbbbbb;
}

.verteilt {
   justify-content: space-around;
}

p.flex-item {
  
	font-weight: bold;
	text-align: center;
}

.flex-item:nth-of-type(2) {

	background: #bbbbbb;	
}

.flex-item:nth-of-type(3) {
	background: #bbbbbb;
}

.flex-item:nth-of-type(4) {
	background: #bbbbbb;
}

.flex-item:nth-of-type(5) {
	background: #bbbbbb;
}

/*aktuelle Seite wird farbig geändert*/
.flex-item a[aria-current=page] {
	color:#333333;
  /*background-color: #c2c2c2;*/
	font-weight:bold; font-size: 1.2em;
}


/*flex-item-navigation heißt nicht flex-item sondern flex-navi */

.flex-navi {
	
  color: #f3ebe0;
  border: 1px transparent;
	/*border-radius: .5em;*/
	margin: .5em;
	padding: .5em;
	background: #a8a8a8;
}
p.flex-navi {
	color: #f3ebe0;
  font-weight: bold;
	text-align: center;
}

.flex-navi:nth-of-type(2) {

	background: #a8a8a8;	
}

.flex-navi:nth-of-type(3) {
	background: #a8a8a8;
}

.flex-navi:nth-of-type(4) {
	background: #a8a8a8;
}

.flex-navi:nth-of-type(5) {
	background: #a8a8a8;
}

/*flex-navi-a */

.flex-navi a {
  /*display:inline-block;
  width:85%;*/
  width: auto;
  /*background: /#fffbf0;*/
  /*border: 1px solid #dfac20;*/
  margin: 0;
  text-decoration: none;
  text-align: center;
  /*geändert*/
  color: #f3ebe0;	 
  font-weight: bold;
  /*font-size: 1.3em;*/

  /*diese Werte wurden aus der duotone copy 2.css hizugefügt*/
  
  background: transparent;
  border-color: transparent;
  display: inline-block;
  width: 95%;
  margin: 0;
  text-decoration: none;
  text-align: center;
  background: transparent;
  color: #f3ebe0;

}
.flex-navi a:hover, nav a:focus {
  /*geändert*/
  background: transparent;
  border-color: transparent;
  color: #f3ebe0;	
  text-shadow:
	0 0 10px #fff,
	0 0 20px #f3ebe0,
	0 0 30px #f3ebe0,
	0 0 40px #f3ebe0,
	0 0 50px #f3ebe0,
	0 0 60px #f3ebe0,
	0 0 70px #f3ebe0;
}
  /*ursprünglicher wert
  /*background-color: #dfac20;*/



/*aktuelle Seite wird farbig geändert*/
.flex-navi a[aria-current=page] {
	color:#333333;
  /*background-color: #c2c2c2;*/
	font-weight:bold; font-size: 1.2em;
}


/*Diese Angaben sind aus der duotone copy 2.css kopiert*/
/*
h3 {
  -webkit-text-decoration: #underline dashed;	
  text-decoration: #underline dashed;
  text-align: left;
}

h2 {
  -webkit-text-decoration: #underline dashed;	
  text-decoration: #underline dashed;
  text-align: left;
}

h1 {
	border-color: transparent;
}

h1::after {
  content: # 'Malerei';
}

h1 {
	/*border-color: #d5d5d5;
}
*/

/*h1::after {
  /*content: '- im Selfhtml-Standard-Look';*//*
}
*/
article img {
	/*width: 100%;*/
  max-width: 100%
	/*float: right;*/
  
	/*margin-left: 0.2em;*/
}

figure {
  display: flex; /*geändert zu copy1 hier: display: inline-block;*/
  width: 99.5%;
  margin: 0.05em;
  padding: 0.05em; 

  /*width: 100%;
  /*margin: 1em;
  padding: 1em; /*hinzugefügt*/
}


figure img {
  width: 100%;
  /*margin: .2em; padding: .2em; /*hinzugefügt*/
}


figure figcaption {
  /*font-style: italic;
  font-family: 'Courier New', Courier, monospace; /*hinzugefügt*/
  bottom: auto;
  /*font-size: 1.3rem/1.5;  margin: 0.2em; padding: .1em; font-weight: 500;/*hinzugefügt*/

}

#logo {
  /*ursprünglicher wert*/
  /*background: #F1F3F4 url("https://wiki.selfhtml.org/images/a/ad/Selfhtml-beispiel_150.svg") 0px 0px no-repeat;
  display: inline-block;
  width:150px;
  height: 50px;
  border: 1px solid transparent; font: 0/0 a; text-shadow: none; color: transparent;
*/
  /*eigener Wert*/
  position: absolute;	
  display:inline-block;
  text-shadow: none; 
  color: transparent;
  background: transparent;
  
  /*border: 1px solid transparent;*/
  /*font: ;*/ 
  flex: 1 100%;/*am 6.11.2024 hinzugefügt*/
  
}
/*neu hinzugefügt*/
#logo:before {
 
  content: "Bernhard Walz";
  background: display=inline-block;
  text-shadow: none; 
  /*color: transparent;*/
  /*background: transparent;*/
  color: #f3ebe0;	
  /*border-radius: 20%;*/
  font-size: 2rem;
 /*width: auto;*/
  /*height: 1em;*/
  /*padding: 0 0.1em 0.2em 0.1em;*/
  /*line-height: 100%;*/
  flex: 1 100%;/*am 6.11.2024 hinzugefügt*/
}

a {
  color: rgb(0, 0, 0);
}

/*
a:hover,
a:focus {
	background: #F1F3F4;
}

#styleswitcher ul {
	list-style-type: none;
}

table {
	width: 100%;	
}
table, th, td { 
	border: 1px solid; 
  border-collapse: collapse; 
	padding: 0.5em;
}
*/

main {
	display: block;     /* für IE */	
	min-height: 400px;
}

aside {
	background: #c4ced3;
	border-color: #8a9da8;
} 

#hinweis {                    /* für Container */

	border-left: 5px solid #c32e04;
}

.hinweis {                    /* für Textzeile */
        color: #c32e04; 
        font-style: italic; 
        border-bottom: 1px dotted; 
        display:inline-block; 
}


/* responsives Layout */

body {
  display: flex;
  flex-flow: row wrap;
  /*align: center;*/
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, nav a, article, section, aside, footer {
  /*border-radius: 0px 0.5em 0.5em;*/
  /*border: 1px solid;*/
  /*padding: 1em;*/
  margin: .5em;
  flex: 1 100%;
/* diese Werte sind aus der duotone Copy 2.css hinzugefügt*/
  border-radius: .5em .5em .5em .5em;
  padding: 1px;
}

header {
  /*background: #F1F3F4;
  border-color: #d5d5d5;*/
  display: flex;
  flex-flow: row wrap;
}
header * {
  flex: 1 1 100%;
  /*margin: 0 1em; (positioniert die Überschrift)*/
}
header img {
  flex: 0 0 150px;
  margin-right: 20px;
}
header nav {
  flex: 1 1 100%;
  /*margin: .5em .5em;
  border-color: #d5d5d5;*/
}
nav ul, nav li{
  margin: 0 /*0.5em*/;
  padding: 0 /*0.5em*/;
  border: none;
}
nav ul {
  display: flex;
  flex-direction: row; /*am 6. 11. 2024 von : column; auf : row; geändert*/
}
nav li {
  list-style-type:none;
  margin: .2em;
  flex: 1 1 100%;
}
nav a {
  /*display:inline-block;
  width:85%;*/
  width: auto;
  /*background: /#fffbf0;*/
  /*border: 1px solid #dfac20;*/
  margin: 0;
  text-decoration: none;
  text-align: center;
  /*geändert*/
  color: #f3ebe0;	 
  font-weight: bold;
  font-size: 1.3em;

  /*diese Werte wurden aus der duotone copy 2.css hizugefügt*/
  
  background: transparent;
  border-color: transparent;
  display: inline-block;
  width: 95%;
  margin: 0;
  text-decoration: none;
  text-align: center;
  background: transparent;
  color: #f3ebe0;

}
nav a:hover, nav a:focus {
  /*geändert*/
  background: transparent;
  border-color: transparent;
  color: #f3ebe0;	
  text-shadow:
	0 0 10px #fff,
	0 0 20px #f3ebe0,
	0 0 30px #f3ebe0,
	0 0 40px #f3ebe0,
	0 0 50px #f3ebe0,
	0 0 60px #f3ebe0,
	0 0 70px #f3ebe0;
}
  /*ursprünglicher wert
  /*background-color: #dfac20;*/


nav a[aria-current=page] {
	color:#333333;
	font-weight:bold;
}
section {
  background: #F1F3F4;
  border-color: slateblue;
}
article {
  background: #a8a8a8;
  border-color: #df6c20;
}
aside {
  background: #ebf5d7;
  border-color: #8db243;
}


/*back button aus zeitvergleich*/ /* in padding und top an lbx-a angepasst */

      #backButton {
        position: fixed;
        top: 6.3em;/*185px;*/
        /*right: 20px; width: 40px; height: 40px;*/
        right: 1em;

        background: rgb(187, 187, 187, 0.8);

        border: none;
        border-radius: .2em;  /*aus lbx-a*/

        cursor: pointer;
        padding: .1em .4em .2em .4em; /*aus lbx-a, aber Werte auf &ntimes; angepasst*/
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        /*font-weight: bold;*/
        font-size: 30px; /* Größe des Kreuzes */
      }
      #backButton:hover {
        background-color:  rgba(168, 168, 168, 0.8);
        color: rgba(255, 255, 255);
      }



/*Bilder in Fließtext einfügen*/

img {
	width: 100%;
	height: auto;

}
/*
@media (min-width: 35em) {
	img {
		width: 50%;
	}
	img.rechts {
		float: right;
		margin-left: 0.5em;
	}
	img.links {
		float: left;
		margin-right: 0.5em;
	}
}
@media (min-width: 50em) {
	img {
		width: 25%;
	}
}
*/
.achtung {
	padding-left: 0.5em;
	border-left: thick solid;
	color: #c82f04;
}


footer {
  background: #bbbbbb;
  border-color: #8a9da8;
  display: flex;
  flex-flow: row wrap;
}
footer * {
  flex: 1 1 0%;
  justify-content: space-between;
}
footer p:last-child {
  text-align: right;
  padding-right: 0.5em;
}
/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
header img {
  /*margin-right: 50px;*/
}
nav ul {
  flex-direction: row;
}
nav li {
  margin: 0 0px; /*margin: 0 10px;*/
  flex: 1 1 0%;
}
article {
  order: 2;
}
/*IMG im Fließtext*/
img {
  width: 60%;
}
img.rechts {
  float: right;
  margin-left: 0.5em;
}
img.links {
  float: left;
  margin-right: 0.5em;
}
/*bis hier IMG*/
#news {
  flex: 1 auto;
  order: 3;
}
aside {
/* durch auto werden die beiden asides in eine Zeile gesetzt */
  flex: 1 auto;
  order: 4;
}
footer {
  order: 5;
}
}

/* Large screens */
@media all and (min-width: 50em) {
  article {    /* Der Article wird 2.5x so breit wie die beiden asides! */
    order: 3;
    flex: 3 1 0%;
  }
  aside {
    flex: 1 1 0%;
  }
  #news {
    flex: 1 1 0%;	  
    order: 2;
    align-self: center;
    height: 12em;
  }
  #logo:before {
    top: -1em;
    left: -5em;
  }	
    
  #index nav li:nth-child(1) a {position: absolute; top: +2em; left: 3em;}
  #index nav li:nth-child(2) a {position: absolute; top: 0em; left: 13em;}
  #index nav li:nth-child(3) a {position: absolute; top: -2em; right: 11em;}
  #index nav li:nth-child(4) a {position: absolute; top: 2em; right: 1.5em;}	

}
/*IMG im Fließtext*/
img {
  width: 25%;
}
/*bis hier IMG*/

/*prefers-color-scheme*/

/*@media (prefers-color-scheme: dark) {
  /* dunkles Farbschema für die Nacht */
/*  body {
    color: white;
    background: grey;
  }

  a {
    color: skyblue;
  }
}
*/
/*@media (prefers-color-scheme: light) {
  /* helles Farbschema für den Tag */
/*}
*/

/* Terminkalender */

table, th, td { 
	width: 100%;
  	border: 1px solid; 
  	border-collapse: collapse; 
}

th, td {
	padding: .5em;
}

th {
	background: #c32e04;
	color: #ffede0;
}

caption {
	caption-side: bottom;
	padding-top: 2em;
	font-style: italic;
}


/*SVG-Responsive*/


svg a,
.info {
	opacity: 0;
}

svg a:hover ~ .info {
	opacity: 1;
	transition: all 0.5s linear;
}

.info > use {
	fill: #b5d9e3;
	stroke: #2a4b6f;
	stroke-width: 1;
}

text {
	text-anchor: middle;
	font-size: 2.5em;
	font-family: sans-serif;
}

tspan {
	font-size: 80%;
	font-style: italic;
}